<template>
	<div>
		<div class="block">
			<span class="demonstration"></span>
			<el-carousel height="300px">
				<el-carousel-item v-for="item in 4" :key="item"> </el-carousel-item>
			</el-carousel>
		</div>
		<div class="container">
			<el-dialog title :visible="isShow" width="70%" @close="closeDialog">
				<video :src="videoUrl" controls autoplay class="video" width="100%"></video>
			</el-dialog>
		</div>
	</div>
</template>
<script>
export default {
	// eslint-disable-next-line vue/multi-word-component-names
	name: "Footer",
	props: {
		webSiteInfo: {
			type: Object,
		},
	},
	data() {
		return {
			fits: ["fill", "contain", "cover", "none", "scale-down"],
			url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
		};
		// return {
		// 	isShow: false,
		// 	// 测试地址
		// 	// videoUrl: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
		// 	videoUrl: "",
		// };
	},

	created() {
		console.log(this.videoUrl, "视频");
	},
	methods: {
		// 视频播放
		playVideo(row) {
			this.isShow = true;
			// 将接受的值赋值给src
			this.videoUrl = row.videoUrl;
		},
		closeDialog() {
			// 关闭弹框
			this.isShow = false;
			this.videoUrl = ""; // 清空数据 关闭视频播放
		},
	},
};
</script>
<style scoped>
.el-carousel__item h3 {
	color: #475669;
	font-size: 14px;
	opacity: 0.75;
	line-height: 150px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
	background-image: url(src\components\account\img\1.jpg);
}

.el-carousel__item:nth-child(2n + 1) {
	background-color: #d3dce6;
}
::v-deep .el-dialog__headerbtn {
	top: -85px;
	right: 50%;
	padding: 0;
	border: none;
	outline: 0;
	cursor: pointer;
	font-size: 45px;
	height: 80px;
	width: 80px;
	border-radius: 50%;
	transform: translateX(50%);
	background-color: rgba(107, 107, 107, 0.5);
}
::v-deep .el-dialog__header {
	background: transparent;
	height: 0;
	padding: 0;
}
::v-deep .el-dialog__body {
	background: transparent;
	height: 0;
	padding: 0;
}
</style>
